<template>
  <!-- 回复弹出层 -->
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="
        comment.reply_count > 0 ? `${comment.reply_count}条回复` : '暂无回复'
      "
    >
      <!-- 控制弹出显示与否的属性是在父组件中 -->
      <van-icon slot="left" name="cross" @click="$emit('close')"> </van-icon>
    </van-nav-bar>
    <!-- 给这几个布局添加可以滚动的容器 -->
    <div class="scroll-wrap">
      <!-- 通过评论组件，渲染回复弹出层中的评论项 -->
      <comment-item :comment="comment"></comment-item>

      <van-cell title="全部评论"></van-cell>

      <!-- 通过评论回复列表组件，渲染回复弹出层中的回复列表项  com_id 评论ID-->
      <comment-list
        :source="comment.com_id"
        type="c"
        :list="commentList"
      ></comment-list>
    </div>
    <!-- 发布评论 -->
    <div class="post-wrop">
      <van-button class="post-btn" size="small" round @click="isPostShow = true"
        >写评论</van-button
      >
    </div>
    <!-- 发布评论的弹层 -->
    <van-popup v-model="isPostShow" position="bottom">
      <comment-post
        :target="comment.com_id"
        @post-success="onPostSuccess"
      ></comment-post>
    </van-popup>
  </div>
</template>

<script>
// 导入评论内容组件
import CommentItem from "./comment-item.vue";
// 导入评论回复列表组件
import CommentList from "./comment-list.vue";
// 导入发送评论组件
import CommentPost from "./comment-post.vue";
export default {
  // 组件名称
  name: "CommentReply",
  // 组件参数 接收来自父组件的数据
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
  // 局部注册的组件
  components: {
    CommentItem, // 内容评论组件
    CommentList, // 评论回复组件
    CommentPost, // 发送评论组件
  },
  // 组件状态值
  data() {
    return {
      isPostShow: false,
      commentList: [],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    onPostSuccess(data) {
      console.log(data);
      //   1. 更新回复的数量
      this.comment.reply_count++;
      //   2. 关闭弹层
      this.isPostShow = false;
      //   3. 将最新的回复内容展示到列表的顶部
      this.commentList.unshift(data.new_obj);
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script> 

<style scoped lang="less">
.comment-reply {
  // 评论列表内容，
  .scroll-wrap {
    position: fixed;
    top: 100 * 2px;
    left: 0;
    right: 0;
    bottom: 88px;
    overflow-y: auto; // 内容可以滚动
  }
  .post-wrop {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 88px;
    border-top: 2px solid #ccc;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    .post-btn {
      width: 60%;
      margin: 10px 0px;
      color: rgb(45, 9, 110);
    }
  }
}
</style>